import { setTextToLink } from '../utils.js'

export const Props = {
  template: `
    <el-card header="Props" ref="container" class="el-card__header-no-border">
      <el-table :data="crudData" style="width: 100%">
        <el-table-column prop="name" label="参数" width="200" />
        <el-table-column prop="description" label="描述" />
        <el-table-column prop="type" label="类型" width="100" />
        <el-table-column prop="default" label="默认值" width="100" />
      </el-table>
    </el-card>
  `,

  data() {
    return {
      crudData: [
        {
          name: 'name',
          description: '目前提供了name属性，则在用户调整表格列宽度时，会使用localstorage缓存表格列宽度。',
          type: 'string',
        },
        {
          name: 'tableConfig',
          description: '表格配置，详见下面的tableConfig介绍',
          type: 'object'
        },
        {
          name: 'searchBarConfig',
          description: '搜索栏配置，不提供则不显示搜索栏，详见下面的searchBarConfig介绍',
          type: 'object'
        },
        {
          name: 'createAndUpdateConfig',
          description: '新增和编辑配置，不提供则不显示新增和编辑按钮，详见下面的createAndUpdateConfig介绍',
          type: 'object'
        },
      ],
    }
  },

  mounted() {
    this.$nextTick(() => {
      setTextToLink(this.$el, 'cell', 'tableConfig介绍', './crud.html#TableConfigDesc', '_self')
      setTextToLink(this.$el, 'cell', 'searchBarConfig介绍', './crud.html#SearchBarConfigDesc', '_self')
      setTextToLink(this.$el, 'cell', 'createAndUpdateConfig介绍', './crud.html#CreateAndUpdateConfigDesc', '_self')
    })
  }
}